
  <template>
  <div class="homeswiper">
    <swiper class="my-swipe" :options="voiceSwiper" indicator-color="#E48B2C">
      <swiper-slide v-for="(item,index) in banner" :key="index">
        <img :src="item.pic" alt="">
      </swiper-slide>
    </swiper>
    <div class="panel-paginationh" slot="pagination">
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name:'HomeSwiper',
  components: {
    swiper,
    swiperSlide
  },
	props: {
	  banner:{
      type: Array,
      default:[]
    }
	},
  data(){
    return{
      voiceSwiper: {
        slidesPerView: 1,
        slidesPerGroup:1,
        observeParents:true,
        observer:true,
        autoplay:true,
        pagination: {
          el: '.panel-paginationh',
          clickable: true
        }
      }
    }
  }
}
</script>

<style scoped>
.homeswiper {
  width: 100%;
  height: 551px;
  position: relative;
}

.panel-paginationh {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%);
}

.panel-paginationh /deep/ .swiper-pagination-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 16px;
  background: #ccc;
  opacity: 1;
  outline: none;
}

.panel-paginationh /deep/ .swiper-pagination-bullet-active {
  background: rgba(228, 139, 44, .9);
  box-shadow: 0 0 10px rgba(228, 139, 44, .9);
}

.my-swipe img {
  width: 100%;
  height: 551px;
  object-fit: cover;
}
</style>
